<template>
    <div>
        <el-upload
            action=""
            :http-request="handleOssUpload"
            :list-type="listType"
            :multiple="false"
            :show-file-list="showFileList"
            :file-list="fileList"
            :before-upload="handleBeforeUpload"
            :on-remove="handleRemove"
            :on-preview="handlePreview"
            :class="{disabled : fileList[0].url}"
        >
            <i class="el-icon-plus" v-if="listType === 'picture-card'"></i>

            <el-button size="small" type="primary" v-else>点击上传</el-button>
        </el-upload>

        <el-dialog :visible.sync="dialogVisible" :modal="false">
            <img width="100%" :src="fileList[0].url" alt="" />
        </el-dialog>
    </div>
</template>
<script>
import { getUUID } from "@/libs";
import { Aliyun } from '@/config'
var OSS = require('ali-oss');
export default {
    name: "SimpleUpload",
    props: {
        value: String,
        listType: {
            type: String,
            // picture,picture-card
            default: "picture"
        },
    },
    computed: {
        imageUrl() {
            return this.value;
        },
        imageName() {
            if (this.value != null && this.value !== "") {
                return this.value.substr(this.value.lastIndexOf("/") + 1);
            } else {
                return null;
            }
        },
        fileList() {
            return [
                {
                    name: this.imageName,
                    url: this.imageUrl
                }
            ];
        },
        showFileList: {
            get: function() {
                return (
                    this.value !== null &&
                    this.value !== "" &&
                    this.value !== undefined
                );
            },
            set: function(newValue) {}
        }
    },
    data() {
        return {
            dialogVisible: false,
            clinet: null,
            progress: 0
        };
    },
    mounted() {
        this.$nextTick(function() {
            // 初始化阿里云OSS
            this.clinet = new OSS(Aliyun.oss);
        });
    },
    methods: {
        emitInput(val) {
            this.$emit("input", val);
        },
        handleRemove(file, fileList) {
            this.emitInput("");
        },
        handlePreview(file) {
            this.dialogVisible = true;
        },
        handleBeforeUpload(file) {
            let _self = this;
        },
        handleOssUpload(option) {
            const _this = this
            try {
                this.clinet.multipartUpload(getUUID(), option.file, {
                    progress(p, checkpoint) {
                        _this.progress = p
                    }
                }).then(result => {
                    const url = result.res.requestUrls[0].split('?')[0]

                    this.showFileList = true;
                    this.fileList.pop();
                    this.fileList.push({
                        name: result.name,
                        url
                    });

                    this.emitInput(url);
                })
            } catch(err) {
                console.log(err);
            }
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.disabled .el-upload--picture-card, .disabled .el-upload--picture{
    display: none;
}
</style>
